<template>
  <view class="sign">
    <view class="sign-bg"></view>
    <view class="sign-group" v-for="(item) in listPagingLazy.list" :key="item.id" @click="goDetail(item.id, item.accountRole)">
      <!-- <view class="bg"></view> -->
      <image :src="assets(item.signature)" mode="widthFix"></image>
      <view class="create-time fs-20">{{dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')}}</view>
    </view>
    <ym-empty class="whole" v-if="listPagingLazy.isEmpty" text="暂无数据" type="search"></ym-empty>
    <ym-load-more class="whole" v-else :status="listPagingLazy.loadStatus"></ym-load-more>
  </view>
</template>

<script lang="ts" setup>
import { reactive, onLoad, useService } from '@/utils/commonUse'
import { PagingLazy } from '@/utils/paging'
import dayjs from 'dayjs'
import { useRouter } from '@/plugins/app-core'
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
const router = useRouter()

import assets from '@/utils/assets'
const service = useService()

const listPagingLazy = reactive(new PagingLazy(async function (page, size) {
  const { total, records }  = await service.mine.getSignatureList({ page, size})
  return { total, records }
}))
listPagingLazy.size = 36

onLoad(async (query) => {
  listPagingLazy.load()
})

onPullDownRefresh(async () => {
  await listPagingLazy.refresh()
  uni.stopPullDownRefresh();
})

onReachBottom(() => {
  listPagingLazy.next()
})

const goDetail = (id: string, accountRole: number) => {
  if (accountRole === 2) {
    router.push({ path: '/pages/organization/detail', query: { id } })
  } else if (accountRole === 3) {
    router.push({ path: '/pages/company/detail', query: { id } })
  } else if (accountRole === 4) {
    router.push({ path: '/pages/observer/detail', query: { id } })
  } else if (accountRole === 1) {
    router.push({ path: '/pages/manager/detail', query: { id } })
  }
}


</script>

<style lang="scss">
.sign {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 20rpx 32rpx;
  box-sizing: border-box;

  .sign-bg{
    background-image: url('../../../assets/mine/paperBg.jpg');
    background-repeat: repeat;
    height: 100vh;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .sign-group{
    width: 32%;
    margin: 0 0 20rpx;
    padding:12rpx 0;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    // background-color:#fff;
    border-radius: 8rpx;
    position:relative;
    .bg{
      width:76rpx;
      height:76rpx;
      position: absolute;
      top:12rpx;
      right:12rpx;
      background-image: url('');
      background-repeat: no-repeat;
      background-size: 76rpx 76rpx;
      background-position: center center;
    }
    image{
      width: 160rpx;
      height: 100rpx;
    }
  }

  .whole{
    width: 100%;
  }
}

</style>